<template>
	<view>
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">发起活动</block>
		</cu-custom>
		<form>


			<view class="cu-form-group margin-top">
				<view class="title">活动类型</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1 ? picker[index] : '请选择类型'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">活动标题</view>
				<input v-model="name" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">发起人</view>
				<input v-model="createBy" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input v-model="phone" type="number" name="input"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>

			<view class="cu-form-group">
				<view class="title">地点</view>
				<input v-model="site" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">开始时间</view>
				<picker mode="date" :value="start" start="2015-09-01" end="2020-09-01" data-type="start" @change="DateChange">
					<view class="picker">
						{{start}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">结束时间</view>
				<picker mode="date" :value="end" start="2019-01-01" end="2030-01-01" data-type="end" @change="DateChange">
					<view class="picker">
						{{end}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">积分</view>
				<input v-model="integral" type="number" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">需要人数</view>
				<input v-model="peoplenum" type="number" name="input"></input>
			</view>
			<!-- picture -->
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					图片上传
				</view>
				<view class="action">
					{{imgList.length}}/4
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">活动说明</view>
				<textarea maxlength="-1" v-model="describe" placeholder="描述一下活动内容"></textarea>
			</view>
			<view class="padding flex flex-direction">
				<button v-if="type==='modify'" @tap="toModify" class="cu-btn bg-red margin-tb-sm lg">修改活动</button>
				<button v-else @tap="toReg" class="cu-btn bg-red margin-tb-sm lg">发起活动</button>
			</view>
		</form>

		<view class="cu-modal" :class="admin ? 'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">管理员身份验证</view>
					<!-- <view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view> -->
				</view>
				<view class="padding-xl bg-white cu-bar search ">
					<view class="search-form round">
						<input v-model="pwd"></input>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<!-- <button class="cu-btn line-green text-green" @tap="hideModal">取消</button> -->
						<button class="cu-btn bg-green margin-left" @tap="goAdmin">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		request,
		dateFormat
	} = require('@/utils/t-request.js');
	// import {
	// 	mapState,
	// } from 'vuex';
	import Vue from 'vue';

	export default {
		data() {
			return {
				picker: ['官方活动',
					// '个人活动',
				],
				index: 0,
				name: "",
				phone: "",
				createBy: "",
				site: "",
				describe: "",
				start: "",
				end: "",
				peoplenum: '',
				integral: '',
				imgList: [],
				type: '',
				id: '',
				admin: true,
				pwd: ''
			}
		},
		computed: {
			// ...mapState('userModule', ['userInfo']),
			today() {
				return dateFormat("YYYY-mm-dd", new Date())
			}
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value;
			},
			DateChange(e) {
				this[e.currentTarget.dataset.type] = e.detail.value
			},
			ChooseImage() {
				let _this = this;
				uni.chooseImage({
					count: 4, //默认9
					//可以指定是原图还是压缩图，默认二者都有
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (_this.imgList.length != 0) {
							_this.imgList = _this.imgList.concat(res.tempFilePaths)
						} else {
							_this.imgList = res.tempFilePaths
						}
						_this.imgList.forEach((item, index) => {
							// 逐条上传
							const uploadTask = uni.uploadFile({
								url: Vue.prototype.baseUrl + '/users/upload',
								filePath: item,
								name: "file",
								header: {
									'content-type': 'multipart/from-data'
								},
								formData: null,
								success: (uploadFileRes) => {
									let urlimg = JSON.parse(uploadFileRes.data).result;
									// console.log(urlimg)
									if (urlimg) {
										_this.imgList.splice(index, 1, urlimg)
										// Vue.set([index], index, urlimg);
									} else {
										_this.imgList.splice(index, 1)
									}
								}
							});

							// uploadTask.onProgressUpdate((res) => {
							// 	console.log('上传进度' + res.progress);
							// 	console.log('已经上传的数据长度' + res.totalBytesSent);
							// 	console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
							// });
						})
					}
				});
			},
			ViewImage(e) {
				// console.log(this.imgList)
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '您好',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			toReg() {
				if (!this.name) return;
				if (!this.phone) return;
				if (!this.createBy) return;
				if (!this.site) return;
				if (typeof(this.integral * 1) !== "number" || this.integral * 1 <= 0) return;
				if (typeof(this.peoplenum * 1) !== "number" || this.peoplenum * 1 <= 0) return;
				// console.log(this.integral, this.integral * 1)
				// return
				request({
					url: "/users/add-act",
					data: {
						type: this.index * 1,
						name: this.name,
						phone: this.phone,
						createBy: this.createBy,
						describe: this.describe,
						site: this.site,
						duration: {
							start: this.start,
							end: this.end
						},
						picture: this.imgList,
						integral: this.integral * 1,
						peoplenum: this.peoplenum * 1,
						// pic: this.userInfo.avatarUrl,
						pic: uni.getStorageSync('avatarUrl'),
						openid: uni.getStorageSync('openid')
					},
					method: 'POST'
				}).then(res => {
					uni.switchTab({
						url: '/pages/home/home'
					})
				})
			},
			toModify() {
				if (!this.name) return;
				if (!this.phone) return;
				if (!this.createBy) return;
				if (!this.site) return;
				if (typeof(this.integral * 1) !== "number" || this.integral * 1 <= 0) return;
				if (typeof(this.peoplenum * 1) !== "number" || this.peoplenum * 1 <= 0) return;
				// console.log(this.integral, this.integral * 1)
				// return
				if (this.type !== 'modify') return;
				request({
					url: "/users/modify-act",
					data: {
						_id: this.id,
						type: this.index * 1,
						name: this.name,
						phone: this.phone,
						createBy: this.createBy,
						describe: this.describe,
						site: this.site,
						duration: {
							start: this.start,
							end: this.end
						},
						picture: this.imgList,
						integral: this.integral * 1,
						peoplenum: this.peoplenum * 1,
					},
					method: 'POST'
				}).then(res => {
					uni.navigateBack({
						delta: 1
					})
				})
			},
			goAdmin() {
				request({
					url: "/users/go-admin",
					method: 'POST',
					data: {
						pwd: this.pwd
					}
				}).then(res => {
					this.admin = !res.data;
					this.pwd = '';
				})
			}
		},
		mounted() {
			this.start = this.today;
			this.end = this.today;
			if (this.type === 'modify') {
				request({
					url: "/users/get-act-byid",
					method: 'POST',
					data: {
						id: this.id
					}
				}).then(res => {
					const {
						type,
						name,
						phone,
						createBy,
						describe,
						site,
						duration,
						picture,
						integral,
						peoplenum
					} = res.data.obj;
					this.index = type;
					this.name = name;
					this.phone = phone;
					this.createBy = createBy;
					this.site = site;
					this.describe = describe;
					this.start = duration.start;
					this.end = duration.end;
					this.peoplenum = peoplenum;
					this.integral = integral;
					this.imgList = picture;
				})
			}
		},
		onLoad(options) {
			const {
				type,
				id
			} = options;
			this.type = type;
			this.id = id;
		}
	}
</script>

<style>

</style>
